<template>
  <!-- <div class="login">登录界面-----store:{{ store.state.count }}</div>
  <button @click="change">增加</button> -->
  <div class="login">
    <el-form class="login-form" ref="ruleFormRef" :model="form" :rules="rules">
      <el-form-item prop="userName">
        <el-input v-model="form.userName" size="large" placeholder="userName" :prefix-icon="User" />
      </el-form-item>

      <el-form-item prop="passWord">
        <el-input type="password" v-model="form.passWord" placeholder="passWord" size="large" :prefix-icon="Lock" />
      </el-form-item>

      <el-form-item prop="code">
        <div class="flx">
          <el-input v-model="form.code" placeholder="验证码" size="large" :prefix-icon="Key" />
        </div>
        <Identify :identifyCode="identifyCode" @click="refreshCode" />
      </el-form-item>

      <el-form-item class="btn-form">
        <el-button type="primary" @click="onSubmit(ruleFormRef)">登录</el-button>
        <el-button @click="resetForm(ruleFormRef)">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script lang="ts" setup>
import { User, Lock, Key, Loading } from "@element-plus/icons-vue";
import { ElForm } from "element-plus";
import { concat } from "lodash";
import { reactive, ref, onMounted, Ref } from "vue";
import { useStore } from "vuex";
import Identify from "./Identify.vue";
import { Login } from '../../api/login';
// const store = useStore();
// const change = () => {
//   store.commit("change");
// };

type FormInstance = InstanceType<typeof ElForm>;
const ruleFormRef = ref<FormInstance>();
const form = reactive({
  userName: "",
  passWord: "",
  code: "",
});

const identifyCode = ref();
const identifyCodes = ref("1234567890abcdefjhijklinopqrsduvwxyz");

const rules = reactive({
  userName: [{ required: true, message: "请输入用户名", trigger: "blur" }],
  passWord: [
    { required: true, message: "请输入密码", trigger: "blur" },
    { min: 6, max: 18, message: "密码长度为6-18", trigger: "blur" },
  ],
  code: [
    { required: true, message: "请输验证码", trigger: "blur" },
    { min: 4, max: 4, message: "验证码长度为4", trigger: "blur" },
  ],
});

const onSubmit = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.validate((valid) => {
    if (valid) {
      console.log("submit!");
      Login(form).then((res: any) => {
        console.log(res);
      })
    } else {
      console.log("error submit!");
      return false;
    }
  });
};

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
  refreshCode();
};
// 重置验证码
const refreshCode = () => {
  identifyCode.value = "";
  makeCode(identifyCode, 4);
};

const makeCode = (o: Ref<any>, l: number) => {
  for (let i = 0; i < l; i++) {
    identifyCode.value +=
      identifyCodes.value[randomNum(0, identifyCodes.value.length)];
  }
};

const randomNum = (min: number, max: number) => {
  return Math.floor(Math.random() * (max - min) + min);
};

onMounted(() => {
  document.onkeydown = (e: any) => {
    e = window.event || e;
    if (e.code === "Enter" || e.code === "enter" || e.code === "NumpadEnter") {
      if (Loading.value) return;
      console.log(ruleFormRef.value);
    }
  };
  refreshCode();
});
</script>

<style lang="less" scoped>
.login {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  background-image: url("../../assets/image/login_bg.jpg");
  background-repeat: no-repeat;
  background-position: left center;
  background-size: cover;
  background-attachment: fixed;

  // width: 7.5rem /* 750/100 */;
  .login-form {
    width: 6rem
      /* 800/100 */
    ;
    background-image: linear-gradient(to left,
        transparent,
        #4ea0db,
        transparent);
    padding: 0.5rem
      /* 60/100 */
      1.5rem
      /* 40/100 */
    ;
    margin-left: 1rem
      /* 100/100 */
    ;
  }
}

/deep/.el-input__wrapper {
  background-color: #fff;
  opacity: 0.7;
}

/deep/.el-input .el-input__icon {
  color: #0758ab;
}

/deep/.btn-form .el-form-item__content {
  display: flex;
  justify-content: space-around;
}

/deep/.el-button {
  width: 45%;
}

/deep/.el-button--primary {
  background: #077aca;
  border: #077aca;
}

/deep/.el-button--default {
  background: #fff;
  border: #fff;
}
</style>
